import React from 'react'
import { createBehavior, createResource } from '@bill_law6/designable-core'
import { DnFC } from '@bill_law6/designable-react'
import { Button as ShadcnButton } from '../../ui/button'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'

export interface ButtonProps extends React.ComponentProps<typeof ShadcnButton> {
  children?: React.ReactNode
}

export const Button: DnFC<ButtonProps> = ShadcnButton as any

Button.Behavior = createBehavior({
  name: 'Button',
  selector: (node) => node.componentName === 'Button',
  designerProps: {
    propsSchema: AllSchemas.Button,
  },
  designerLocales: AllLocales.Button,
})

Button.Resource = createResource('Inputs', {
  title: { 'zh-CN': '按钮', 'en-US': 'Button' },
  icon: 'ButtonSource',
  elements: [
    {
      componentName: 'Button',
      props: {
        children: 'Button',
        type: 'button',
        variant: 'default',
      },
    },
  ],
})